<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="UTF-8">

<link href="${pageContext.request.contextPath}/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>
<script>
	$(function (){
		//向下弹出
		$(".mydatedown").datetimepicker({
			language:"zh-CN",
			format:"yyyy-mm-dd",
			autoclose:1,
			minView:"month",
			initialDate:new Date(),
			todayBtn:true,
			clearBtn:true//需要手动在插件内汉化
		});
		//向上弹出
		$(".mydatetop").datetimepicker({
			language:"zh-CN",
			format:"yyyy-mm-dd",
			autoclose:1,
			minView:"month",
			initialDate:new Date(),
			todayBtn:true,
			clearBtn:true,//需要手动在插件内汉化
			pickerPosition:"top-right"
		});
		$("#create-transactionStage").change(function (){
			var stage = $("#create-transactionStage option:selected").text();
			if(stage==""){
				$("#create-possibility").val("");
				return;
			}
			$.ajax({
				url:"${pageContext.request.contextPath}/tran/getPossibilityStage",
				data:{
					stage:stage
				},
				type:"post",
				dataType:"json",
				success:function (data){
					$("#create-possibility").val(data+"%");
				}
			});
		});
		//客户信息补全
		$("#create-accountName").typeahead({
			source:function (jquery,process){
				$.ajax({
					url:"${pageContext.request.contextPath}/tran/getCustomerNameByName",
					data:{
						name:jquery
					},
					type:"post",
					dataType:"json",
					success:function (data){
						process(data);
					}
				});
			}
		});

		$("#saveTran").click(function (){
			var owner          =$("#create-transactionOwner").val();
			var money          =$.trim($("#create-amountOfMoney").val());
			var name           =$.trim($("#create-transactionName").val());
			var expectedDate   =$("#create-expectedClosingDate ").val();
			var accountName     =$.trim($("#create-accountName     ").val());
			var stage          =$("#create-transactionStage").val();
			var type           =$("#create-transactionType").val();
			var source         =$("#create-clueSource").val();
			var activityId     =$("#activityId").val();
			var contactsId     =$("#contactsName").val();
			var description    =$("#create-description    ").val();
			var contactSummary =$("#create-contactSummary ").val();
			var nextContactTime=$("#create-nextContactTime").val();
			 if (owner==""){
				 alert("所有者不能为空！");
				 return;
			 }
			 var money_regx = /^(0|[1-9][0-9]*)$/;
			 if (!money_regx.test(money)){
				 alert("金额只能是非负数！");
				 return;
			 }
			if (name==""){
				alert("名称不能为空！");
				return;
			}
			if (expectedDate==""){
				alert("预计成交日期不能为空！");
				return;
			}
			if (accountName==""){
				alert("客户名称不能为空！");
				return;
			}
			if (stage==""){
				alert("阶段不能为空！");
				return;
			}
			$.ajax({
				url:"${pageContext.request.contextPath}/tran/saveTran",
				data:{
					owner           :owner          ,
					money           :money          ,
					name            :name           ,
					expectedDate    :expectedDate   ,
					accountName     :accountName    ,
					stage           :stage          ,
					type            :type           ,
					source          :source         ,
					activityId      :activityId     ,
					contactsId      :contactsId     ,
					description     :description    ,
					contactSummary  :contactSummary ,
					nextContactTime :nextContactTime
				},
				type:"post",
				dataType:"json",
				success:function (data){
					if (data.errorCode=="1"){
						alert("创建成功!");
						window.location.href="${pageContext.request.contextPath}/customer/toDetail?id=${currentCustomerId}";
					}else {
						alert(data.errorMessage);
					}
				}
			});
		});
		//取消时返回原页面
		$("#cancelBtn").click(function (){
			window.location.href="${pageContext.request.contextPath}/customer/toDetail?id=${currentCustomerId}";
		});
		//弹出市场活动模态窗口
		$("#showActivitySource").click(function (){
			$("#getActivityName").val("");
			getActivityPages("",null);
			$("#findMarketActivity").modal("show");
		});
		//实现市场活动源的可搜索
		$("#getActivityName").keyup(function (){
			var activityName = $("#getActivityName").val();
			getActivityPages(activityName,null);
		});
		//选择市场活动
		$("#activityListPages").on("click","input[type='radio']",function (){
			var activityId = $(this).val();
			var activityName = $("#tdName_"+activityId).text();
			$("#activityId").val(activityId);
			$("#create-activitySrc").val(activityName);
			$("#findMarketActivity").modal("hide");
		});
		//弹出联系人查询窗口
		$("#getContacts").click(function (){
			$("#getcontactsName").val("");
			$("#findContacts").modal("show");
			getContactsPages("");
		});
		//实现联系人可查询
		$("#getcontactsName").keyup(function (){
			var contactsName = $("#getcontactsName").val();
			getContactsPages(contactsName);
		});
		//实现联系人的选择,隐藏窗口
		$("#contactsList").on("click","input[type='radio']",function (){
			var contactsId = $(this).val();
			var fullname = $("#tdFullName_"+contactsId).text();
			$("#contactsName").val(contactsId);
			$("#create-contactsName").val(fullname);
			$("#findContacts").modal("hide");
		});
	});
	//市场活动源查询函数
	function getActivityPages(activityName,clueId){
		$.ajax({
			url:"${pageContext.request.contextPath}/clue/getActivityByNameAndClueId",
			data:{
				activityName:activityName,
				clueId:clueId
			},
			type:"post",
			dataType:"json",
			success:function (data){
				var lis="";
				$.each(data,function (index,activity){
					lis+="<tr>";
					lis+="<td><input name=\"activity\" value=\""+activity.id+"\" type=\"radio\"/></td>";
					lis+="<td id=\"tdName_"+activity.id+"\">"+activity.name+"</td>";
					lis+="<td>"+activity.startDate+"</td>";
					lis+="<td>"+activity.endDate+"</td>";
					lis+="<td>"+activity.owner+"</td>";
					lis+="</tr>";
				});
				$("#activityListPages").html(lis);
			}
		});
	}
	//联系人查询函数
	function getContactsPages(contactsName){
		var lis="";
		$.ajax({
			url:"${pageContext.request.contextPath}/contacts/getContactsByName",
			data:{
				contactsName:contactsName
			},
			type:"post",
			dataType:"json",
			success:function (data){
				$.each(data,function (index,value){
					lis+="<tr>";
					lis+="<td><input value=\""+value.id+"\" type=\"radio\" name=\"activity\"/></td>";
					lis+="<td id=\"tdFullName_"+value.id+"\">"+value.fullname+"</td>";
					lis+="<td>"+value.email+"</td>";
					lis+="<td>"+value.mphone+"</td>";
					lis+="</tr>";
				});
				$("#contactsList").html(lis);
			}
		});
	}
</script>
</head>
<body>

	<!-- 查找市场活动 -->	
	<div class="modal fade" id="findMarketActivity" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input id="getActivityName" type="text" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable3" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
							</tr>
						</thead>
						<tbody id="activityListPages">
<%--							<tr>--%>
<%--								<td><input type="radio" name="activity"/></td>--%>
<%--								<td>发传单</td>--%>
<%--								<td>2020-10-10</td>--%>
<%--								<td>2020-10-20</td>--%>
<%--								<td>zhangsan</td>--%>
<%--							</tr>--%>
<%--							<tr>--%>
<%--								<td><input type="radio" name="activity"/></td>--%>
<%--								<td>发传单</td>--%>
<%--								<td>2020-10-10</td>--%>
<%--								<td>2020-10-20</td>--%>
<%--								<td>zhangsan</td>--%>
<%--							</tr>--%>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 查找联系人 -->	
	<div class="modal fade" id="findContacts" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input id="getcontactsName" type="text" class="form-control" style="width: 300px;" placeholder="请输入联系人名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
						</thead>
						<tbody id="contactsList">
<%--							<tr>--%>
<%--								<td><input type="radio" name="activity"/></td>--%>
<%--								<td>李四</td>--%>
<%--								<td>lisi@bjpowernode.com</td>--%>
<%--								<td>12345678901</td>--%>
<%--							</tr>--%>
<%--							<tr>--%>
<%--								<td><input type="radio" name="activity"/></td>--%>
<%--								<td>李四</td>--%>
<%--								<td>lisi@bjpowernode.com</td>--%>
<%--								<td>12345678901</td>--%>
<%--							</tr>--%>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	
	<div style="position:  relative; left: 30px;">
		<h3>创建交易</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button type="button" class="btn btn-primary" id="saveTran">保存</button>
			<button type="button" class="btn btn-default" id="cancelBtn">取消</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
		<div class="form-group">
			<label for="create-transactionOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-transactionOwner">
				  <c:forEach items="${userList}" var="u">
					  <option value="${u.id}">${u.name}</option>
				  </c:forEach>
				</select>
			</div>
			<label for="create-amountOfMoney" class="col-sm-2 control-label">金额</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-amountOfMoney">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-transactionName">
			</div>
			<label for="create-expectedClosingDate" class="col-sm-2 control-label">预计成交日期<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control mydatedown" id="create-expectedClosingDate" readonly>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-accountName" class="col-sm-2 control-label">客户名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-accountName" placeholder="支持自动补全" value="${currentCustomerName}">
			</div>
			<label for="create-transactionStage" class="col-sm-2 control-label">阶段<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
			  <select class="form-control" id="create-transactionStage">
			  	<option></option>
			  	<c:forEach items="${stageList}" var="s">
					<option value="${s.id}">${s.value}</option>
				</c:forEach>
			  </select>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionType" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-transactionType">
				  <option></option>
					<c:forEach items="${tranList}" var="s">
						<option value="${s.id}">${s.value}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-possibility" readonly>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-clueSource" class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-clueSource">
				  <option></option>
					<c:forEach items="${sourceList}" var="s">
						<option value="${s.id}">${s.value}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-activitySrc" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" id="showActivitySource"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="activityId">
				<input type="text" class="form-control" id="create-activitySrc">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);" id="getContacts"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="contactsName">
				<input type="text" class="form-control" id="create-contactsName">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-description" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-description"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control mydatetop" id="create-nextContactTime" readonly>
			</div>
		</div>
		
	</form>
</body>
</html>